<template>
	<div class="tmpl">


		<parent></parent>
		<br>
		<br>
		<br>

		{{msg}}

		<p>
			<hr>
			1.0 v-model 指令的样式<br>
			<!-- v-model很牛逼的功能就是能够实现数据的双向绑定 -->
			<input type="text"  v-model="msg">

			<hr>
			2.0 v-text 指令的样式<br>
			<span v-text="msg"></span>

			<hr>
			3.0 v-html 指令的样式<br>
			<span v-html="msg1"></span>

			<hr>
			4.0 v-bind 指令的样式<br>
			<!-- <span v-html="msg" v-bind:title="tip" v-bind:pid="tip"></span> -->
			简写形式如下
			<span v-html="msg" :title="tip" :pid="tip"></span>

			<hr>
			5.0 v-if 指令的样式(不解析)<br>
			<span v-if="isOk" v-html="msg1"></span>

			<hr>
			6.0 v-show 指令的样式(隐藏)<br>
			<span v-show="isOk" v-html="msg1"></span>

			<hr>
			7.0 v-on 注册事件<br>
			<!-- <button v-on:click="click">显示或者隐藏v-show和v-if</button> -->
			<!-- 简写 -->
			<button @click="click">显示或者隐藏v-show和v-if</button>

			<hr>
			8.0 v-for 指令的样式<br>
			<ul>
				<li v-for="item in names">
					{{item}}  --->  <span v-text="item"></span> --->> <span v-html="item"></span> 
				</li>
			</ul>
			推荐的第二种写法：推荐使用：key:"index"表示当前元素的唯一标识
			<ul>
				<li v-for="(item,index) in names" :key="index">
					{{item}}  --->  <span v-text="item"></span> --->> <span v-html="item"></span> 
				</li>
			</ul>
			第三种写法:可以遍历一个对象中的所有属性的值
			<ul>
				<li v-for="item in user">
					{{item}}
				</li>
			</ul>
			第四种写法:可以遍历一个对象的key和value
			<ul>
				<li v-for="(item,key,index) in user" :key="index">
					{{key}} ---> {{item}} ---> {{index}}
				</li>
			</ul>
		</p>
	</div>
</template>

<script>
import parent from './components/parent.vue'

export default{
	//注意点:在.vue中编写的data一定是一个方法，如果实在.html中编写可以是一个属性
	data(){
		return{
			msg:'欢迎来到vue.js学习',
			msg1:'<h1>我是一个h1标签</h1>',
			tip:'我是一个提醒',
			isOk:0,
			names:["张三","赵四","比尔盖茨","比尔盖茨"],
			user:{name:'曹操',age:400}
		}
	},
	methods:{
		click(){
			// alert(1)
			// 想要显示和隐藏页面中的v-show和v-if中的内容
			//由于v-show和v-if在这个页面中是依赖于isOk变量的，所以控制这个两个元素的显示和隐藏只需要修改isOk的值即可
			this.isOk = !this.isOk;
		}
	},
	components:{
		parent  //注册
	}
}
</script>

<style>
	.tmpl{
		color:red;
	}
</style>